<template>
  <div style="margin-bottom: 20px">
    <span style="font-size: 18px;font-weight: bold">
      输入文本，计算文本的困惑度
    </span>
  </div>
  <el-divider/>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h3 style="display: inline">请输入文本：</h3>
      </div>
    </template>
    <el-input
        type="textarea"
        placeholder="请输入文本"
        v-model="text"
        :autosize="{ minRows: 4, maxRows: 8}"
        maxlength="1000"
        show-word-limit
    >
    </el-input>
    <el-divider/>
    <div style="text-align: right">
      <el-button type="primary" round @click="onCalculationClick">计算困惑度</el-button>
    </div>
  </el-card>
  <div v-for="each in resultCardList" :key="'perplexity-calculation-card-' + each.cardIndex">
    <el-divider/>
    <perplexity-calculation-task-card
        :text="each.text"
        :card-index="each.cardIndex"
        @close="onCardClose(each.cardIndex)"/>
  </div>
</template>

<script>
import PerplexityCalculationTaskCard from "./PerplexityCalculationTaskCard.vue";
import {ElMessage} from "element-plus";

export default {
  name: "PerplexityCalculationTask",
  components: {
    PerplexityCalculationTaskCard
  },
  data() {
    return {
      resultCardList: [],
      resultCardIndex: 0,
      text: '',
    }
  },
  methods: {
    onCardClose(cardIndex) {
      for (let i = 0; i < this.resultCardList.length; ++i) {
        if (this.resultCardList[i].cardIndex === cardIndex) {
          this.resultCardList.splice(i, 1);
          break;
        }
      }
    },
    onCalculationClick() {
      if (this.text.length === 0) {
        ElMessage('文本不能为空')
        return
      }
      this.resultCardList.unshift({
        text: this.text,
        cardIndex: this.resultCardIndex
      })
      this.resultCardIndex += 1
    },
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  text-align: left;
  margin-top: 10px;
}
</style>